<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/common/page.jsp" %>
<!doctype html>
<html lang="zh">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>响应式简单个性个人博客模板</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" type="text/css" href="static/css/index.css" media="all" />
		<link rel="stylesheet" type="text/css" href="static/css/page.css" media="all" />
		<style type="text/css">
			.currentPage{
				cursor: not-allowed;
			}
			.currentPage a{
				pointer-events:none;
				background-color: rgba(123,23,3,0.2) !important;
				box-shadow: 0 0 0 0 rgb(0,0,0) !important;
			}
		</style>
	</head>

	<body class="home blog custom-background round-avatars">
		<div class="Yarn_Background" style="background-image: url( static/images/47fb3c_.jpg);"></div>
		<%-- <form class="js-search search-form search-form--modal" method="get" action="search.html" role="search">
			<div class="search-form__inner">
				<div>
					<div id="search-container" class="ajax_search">
						<form method="get" id="searchform" action="">
							<div class="filter_container"><input type="text" value="" autocomplete="off" placeholder="Type then select or enter" name="s" id="search-input" />
								<ul id="search_filtered" class="search_filtered"></ul>
							</div>
							<input type="submit" name="submit" id="searchsubmit" class="searchsubmit" value="" />
						</form>
					</div>
				</div>
			</div>
		</form> --%>
		<div class="navi" data-aos="fade-down">
			<div class="bt-nav">
				<div class="line line1"></div>
				<div class="line line2"></div>
				<div class="line line3"></div>
			</div>
			<div class="navbar animated fadeInRight">
				<div class="inner">
					<nav id="site-navigation" class="main-navigation">
						<div id="main-menu" class="main-menu-container">
							<div class="menu-menu-container">
								<ul id="primary-menu" class="menu">
									<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-17">
										<a href="${rootPath }/">首页</a>
									</li>
									<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173">
										<a href="${rootPath }/auth/login.html">登录</a>
									</li>
									<!-- <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
										<a href="link.html">注册</a>
									</li>
									<li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-252">
										<a href="archives.html">归档</a>
										<ul class="sub-menu">
											<li id="menu-item-165" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-165">
												<a href="">theme</a>
											</li>
											<li id="menu-item-163" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-163">
												<a href="">Happen</a>
											</li>
											<li id="menu-item-924" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-924">
												<a href="">WeWork</a>
											</li>
											<li id="menu-item-164" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-164">
												<a href="">WordPress</a>
											</li>
										</ul>
									</li>
									<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57">
										<a href="gustbook.html">留言</a>
									</li> -->
								</ul>
							</div>
						</div>
					</nav>
					<!-- #site-navigation -->
				</div>
			</div>
		</div> 
		<!-- <div class="hebin" data-aos="fade-down">
			<i class=" js-toggle-search iconfont">&#xe60e;</i>
		</div>  -->
		<header id="masthead" class="overlay animated from-bottom" itemprop="brand">
			<div class="site-branding text-center">
				<a href="${rootPath }/">
					<figure>
						<img class="custom-logo avatar" src="static/images/omikron.png" />
					</figure>
				</a>
				<h3 class="blog-description"><p>This is beauty</p></h3>
			</div>
			<!-- .site-branding -->
			<div class="decor-part">
				<div id="particles-js"></div>
			</div>
			<div class="animation-header">
				<div class="decor-wrapper">
					<svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
						<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
						<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
						<path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba(255,255,255, .3)"></path>
						<path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba(255,255,255, .3)"></path>
						<path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba(255,255,255, .5)"></path>
						<path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba(255,255,255, .5)"></path>
						<path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
						<path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
					</svg>
				</div>
			</div>
		</header>
		<div id="main" class="content">
			<div class="container">
				<article itemscope="itemscope">
					<div class="posts-list js-posts">
						<c:forEach items="${briefs }" var="brief" varStatus="count">
						<c:choose>
							<c:when test="${brief.id%3!=0 }">
								<div class="post post-layout-list" data-aos="fade-up">
									<div class="status_list_item icon_kyubo">
										<div class="status_user" 
										<c:if test="${brief.img=='' }">
											style = "background-image:url(${rootPath}/static/images/default.jpeg);"
										</c:if> 
										<c:if test="${brief.img!='' }">
											style = "background-image:url(${rootPath }${brief.img });"
										</c:if>
										>
											<div class="status_section">
												<a href="${rootPath }/detail.html?id=${brief.id}" class="status_btn">${brief.title }</a>
												<p class="section_p">${brief.summary }&emsp;...</p>
											</div>
										</div>
									</div>
								</div>
							</c:when>
							<c:otherwise>
							<div class="post post-layout-list" data-aos="fade-up">
								<div class="postnormal review ">
									<div class="post-container review-item">
										<div class="row review-item-wrapper">
											<div class="col-sm-3">
												<a rel="nofollow" href="${rootPath }/detail.html?id=${brief.id}">
													<div class="review-item-img" 
													<c:if test="${brief.img=='' }">
														style="background-image: url(static/images/diego-ph-249471-2-800x1000.jpg);"
													</c:if> 
													<c:if test="${brief.img!='' }">
														style = "background-image:url(${rootPath }${brief.img });"
													</c:if>
													></div>
												</a>
											</div>
											<div class="col-sm-9 flex-xs-middle">
												<div class="review-item-title">
													<a href="${rootPath }/detail.html?id=${brief.id}" rel="bookmark">${brief.title }</a>
												</div>
												<div class="review-item-creator"><b>发布日期：</b><fmt:formatDate value="${brief.publishTime }" pattern="yyyy-MM-dd hh:mm:ss"/> </div>
												<span class="review-item-info"><b>总浏览量：</b>${brief.readNum } reads</span>
											</div>
										</div>
										<div class="review-bg-wrapper">
											<div class="bg-blur" 
												<c:if test="${brief.img=='' }">
													style="background-image: url(static/images/diego-ph-249471-2-800x1000.jpg);"
												</c:if> 
												<c:if test="${brief.img!='' }">
													style = "background-image:url(${rootPath }${brief.img });"
												</c:if>
											></div>
										</div>
									</div>
									<div class="post-container">
										<div class="entry-content">${brief.summary }&emsp;...</div>
										<div class="post-footer">
											<a class="gaz-btn primary" href="">READ MORE</a>
											<!-- <span class="total-comments-on-post pull-right"><a href="">31 Comments</a></span> -->
										</div>
									</div>
								</div>
							</div>
							</c:otherwise>
						</c:choose>
							
						</c:forEach>
					</div>
					<!-- post-formats end Infinite Scroll star -->
					<!-- post-formats -->
					<!-- <div class="pagination js-pagination">
						<div class="js-next pagination__load">
							<a href=""><i class="iconfont">&#xe605;</i></a>
						</div>
					</div> -->
					<div style="text-align: center;">
					<ul id="menu">
						<li><a href="index.html?page=${page.prePage }">Prev</a></li>
						<c:set var="begin" value="${page.currentPage<=2?1:(page.currentPage+2<=page.totalPage?page.currentPage-2:page.totalPage-4)}"></c:set>
						
						<c:forEach begin="${begin<=0?1:begin}" end="${page.currentPage+2<=page.totalPage?(page.totalPage>5?begin+4:page.totalPage):page.totalPage }" var="p">
						<li class="${page.currentPage==p?'currentPage':'' }"><a href="index.html?page=${p }">${p }</a></li>
						</c:forEach>
						<li><a href="index.html?page=${page.nextPage }">Next</a></li>
				    </ul>
				    </div>
					<!-- -pagination  -->
			</div>
		</div>

		<footer id="footer" class="overlay animated from-top">
			<div class="decor-wrapper">
				<svg id="footer-decor" class="decor top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
					<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
					<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
					<path class="medium left" d="M0 0 L50 50 L0 66.6" fill="rgba(255,255,255, .3)"></path>
					<path class="medium right" d="M100 0 L50 50 L100 66.6" fill="rgba(255,255,255, .3)"></path>
					<path class="small left" d="M0 0 L50 50 L0 33.3" fill="rgba(255,255,255, .5)"></path>
					<path class="small right" d="M100 0 L50 50 L100 33.3" fill="rgba(255,255,255, .5)"></path>
					<path d="M0 0 L50 50 L100 0 L0 0" fill="rgba(255,255,255, 1)"></path>
					<path d="M48 48 L50 51 L52 48 L48 48" fill="rgba(255,255,255, 1)"></path>
				</svg>
			</div>
			<!-- <div class="socialize" data-aos="zoom-in">
				<li>
					<a title="weibo" class="socialicon" href=""><i class="iconfont" aria-hidden="true">&#xe601;</i></a>
				</li>
				<li class="wechat">
					<a class="socialicon"><i class="iconfont">&#xe609;</i></a>
					<div class="wechatimg"><img src="statics/images/49D3746D-7519-B709-83E4-65BD1927C4E7.jpg"></div>
				</li>
				<li>
					<a title="QQ" class="socialicon" href="" target="_blank"><i class="iconfont" aria-hidden="true">&#xe616;</i></a>
				</li>
			</div> -->
			<div class="cr">
				Copyright&copy;2018. Design by
				<a href="">sucaihuo</a>
			</div>
			<script type='text/javascript' src='static/js/jquery.min.js'></script>
			<script type='text/javascript' src='static/js/plugins.js'></script>
			<script type='text/javascript' src='static/js/script.js'></script>
			<script type='text/javascript' src='static/js/particles.js'></script>
			<script type='text/javascript' src='static/js/aos.js'></script>

	</body>

</html>